<template>
  <!-- 流程图拖拽功能 -->
  <div class="super-flow-demo2">

    <!-- <textform></textform> -->


    <super-flow
      ref="superFlow"
      :node-list="nodeListNode"
      :link-list="linkListNode"
      :linkStyle="linkStyle"
      :width="1000"
      :height="800"
      :origin="[782, 463]"
      :linkDesc="linkDesc"
      :graph-menu="graphMenuList"
      :node-menu="nodeMenuList"
      :link-menu="linkMenuList"
      :enter-intercept="enterIntercept"
      :output-intercept="outputIntercept">
      <template v-slot:node="{meta}">
        <div :class="`flow-node flow-node-${meta.prop}`" :style="metaStyle(meta)">
          <div class="content" :style="ccStyle(meta)"></div>
          <div class="spanText">
            <i class="el-icon-copy-document"></i>
            <span>{{meta.name}}</span>
          </div>
          <div class="contentLine" v-if="meta.content">{{meta.content}}</div>
          <!-- <header>
            {{meta.name}}
          </header> -->
          <!-- <section></section>  -->
        </div>
      </template>
    </super-flow>

    <!-- 编辑类的弹窗 -->
    <popup :show.sync="show" :model.sync="model" title="连接线编辑">
      <template #customize>
        <form-list :cors="formList" :model="model">
          <template #textColor>
             <el-color-picker v-model="model.textColor"></el-color-picker>
          </template>
          <template #borderColor>
             <el-color-picker v-model="model.borderColor"></el-color-picker>
          </template>
          <template #btns="val">
            <el-button @click="out" size="mini">取消</el-button>
            <el-button type="primary" @click="save(val)" size="mini">确认</el-button>
          </template>
        </form-list>
      </template>
    </popup>
  </div>
</template>

<script lang="ts">
import textform from './text.vue'
  import popup from '@/components/system/popup/popup.vue'
  import formList from "@/components/system/form/form.vue"
  import { popPrompt } from "@/utils/popup"
  import SuperFlow from 'vue-super-flow' 
  import 'vue-super-flow/lib/index.css'
  import { Vue, Component,Watch, Prop } from "vue-property-decorator";
  @Component({
    components:{
      SuperFlow,
      popup,
      formList,
      textform
    }
  })
  export default class extends Vue {

    @Prop({ default:()=>[] }) nodeList!:any[] // 初始化节点列表
    @Prop({ default:()=>[] }) linkList!:any[] // 初始化连线列表

    // 暂时不对外开放的功能
    // @Prop({}) graphMenuList:any[] // 点击空白处的右键菜单
    // @Prop({}) nodeMenuList!:any[]  // 点击节点的右键菜单
    // @Prop({}) linkMenuList!:any[] // 点击连接线的右键菜单

    public show = false
    public model:any = { // 连接线及其文字的绑定model
      borderColor:'',
      color:''
    };
    public shouldBorder:any = {}
    public formList = [
      { label:'编辑文字',prop:'tips',type:'text',width:100 },
      { label:'连接线颜色',prop:'borderColor',type:'custom',width:100 },
      { label:'文字颜色',prop:'textColor',type:'custom',width:100 },
    ]

    private out(){ this.show = false }

    private save(val:any){
      console.log(val)
      this.shouldBorder = val.data
      this.show = false;
    }

    private editBorder(link:any){
      console.log(link)
      console.log(this.nodeListNode)
      this.show = true;
      if(!link.meta){ link.meta = {} }
      this.shouldBorder = link.meta
    }

    @Watch('nodeList',{deep:true})
    // 监听流程图的数据更新
    private nodeListUpdate(n:any,o:any){
      this.nodeListNode = n
    }

    @Watch('nodeListNode',{deep:true})
    private newUpdate(n:any,o:any){
      this.nodeListNode = n
    }

    @Watch('linkList',{deep:true})
    // 监听连接线的动态更新
    private linkListNodeUpdate(n:any,o:any){
      this.linkListNode = n
    }

    created(){
      if(this.linkList && this.linkList.length>0){ this.linkListNode = JSON.parse(JSON.stringify(this.linkList))} 
      if(this.nodeList && this.nodeList.length>0){ this.nodeListNode = JSON.parse(JSON.stringify(this.nodeList))}
    }

    public nodeListNode:any[] =  [  // 初始化节点列表
          // {
          //   id: 'nodeni9QOqT3mI7hsMau',
          //   width: 200,
          //   height: 100,
          //   coordinate: [-442, -283],
          //   meta: {
          //     borderColor:'red',
          //     prop: 'condition',
          //     name: '条件节点1',
          //     content:'项目中常常有这种需要我们对溢出文本进行"..."显示的操作，单行多行的情况都有（具体几行得看设计师心情了），这篇随笔是我个人对这种情况解决办法的归纳，欢迎各路英雄指教。'
          //   }
          // },
          // {
          //   id: 'node7WXbwOR6kSFD53Hf',
          //   width: 200,
          //   height: 100,
          //   coordinate: [-442, -133],
          //   meta: {
          //     borderColor:'blue',
          //     prop: 'condition',
          //     name: '条件节点',
          //     content:'项目中常常有这种需要我们对溢出文本进行"..."显示的操作，单行多行的情况都有（具体几行得看设计师心情了），这篇随笔是我个人对这种情况解决办法的归纳，欢迎各路英雄指教。'
          //   }
          // },
          // {
          //   id: 'nodeG3WeFnzCI15X58Qw',
          //   width: 200,
          //   height: 100,
          //   coordinate: [-442, 17],
          //   meta: {
          //     prop: 'condition',
          //     name: '条件节点',
          //     content:'项目中常常有这种需要我们对溢出文本进行"..."显示的操作，单行多行的情况都有（具体几行得看设计师心情了），这篇随笔是我个人对这种情况解决办法的归纳，欢迎各路英雄指教。'
          //   }
          // },
          // {
          //   id: 'nodeS3WgFnzCI15X58Qw',
          //   width: 100,
          //   height: 80,
          //   coordinate: [-642, -123],
          //   meta: {
          //     prop: 'start',
          //     name: '开始节点'
          //   }
          // },
          // {
          //   id: 'nodeZBK0ZPpgMe1exezE',
          //   width: 200,
          //   height: 100,
          //   coordinate: [-142, -283],
          //   meta: {
          //     prop: 'approval',
          //     name: '审批节点测试工作参加想法大汇集'
          //   }
          // },
          // {
          //   id: 'nodefHsy9uJObPtdHZv1',
          //   width: 200,
          //   height: 100,
          //   coordinate: [-142, -133],
          //   meta: {
          //     prop: 'approval',
          //     name: '审批节点'
          //   }
          // },
          // {
          //   id: 'node0aiA9VuhjkiAdZCs',
          //   width: 200,
          //   height: 100,
          //   coordinate: [-142, 17],
          //   meta: {
          //     borderColor:'red',
          //     prop: 'approval',
          //     name: '审批节点'
          //   }
          // },
          // {
          //   id: 'nodeqkK9zjcDz53xKRlK',
          //   width: 200,
          //   height: 100,
          //   coordinate: [158, -208],
          //   meta: {
          //     borderColor:'red',
          //     prop: 'cc',
          //     name: '抄送节点'
          //   }
          // },
          // {
          //   id: 'nodeDhVU6w2KbEnJCjZs',
          //   width: 100,
          //   height: 50,
          //   coordinate: [458, -108],
          //   meta: {
          //     prop: 'end',
          //     name: '结束节点'
          //   }
          // },
          // {
          //   id: 'nodesyxisLH1hJDdPsxx',
          //   width: 200,
          //   height: 100,
          //   coordinate: [158, -58],
          //   meta: {
          //     prop: 'cc',
          //     name: '抄送节点去外地群大大无阿达瓦多哇多阿达瓦多哇多ad挖到挖到挖到啊'
          //   }
          // }
        ]
    
    public linkListNode:any[] =  [  // 初始化连线列表
          // {
          //   id: 'linkQfGI6apBdZm4qHe3',
          //   startId: 'nodeS3WgFnzCI15X58Qw',
          //   endId: 'nodeni9QOqT3mI7hsMau',
          //   startAt: [100, 40],
          //   endAt: [0, 50],
          //   meta: {
          //     tips:'测试地址1',
          //     borderColor:'red',
          //     color:'red'
          //   }
          // },
          // {
          //   id: 'linkJalC4dAzpQfu5WMi',
          //   startId: 'nodeS3WgFnzCI15X58Qw',
          //   endId: 'node7WXbwOR6kSFD53Hf',
          //   startAt: [100, 40],
          //   endAt: [0, 50],
          //   meta: {
          //     tips:'测试地址2',
          //     borderColor:'red',
          //     color:'red'
          //   }
          // },
          // {
          //   id: 'linkjUVmbLfRhxPfFISJ',
          //   startId: 'nodeS3WgFnzCI15X58Qw',
          //   endId: 'nodeG3WeFnzCI15X58Qw',
          //   startAt: [100, 40],
          //   endAt: [0, 50],
          //   meta: {
          //     borderColor:'blue',
          //     color:'#ccc'
          //   }
          // },
          // {
          //   id: 'linkP3zJNvSKHutesZs4',
          //   startId: 'nodeni9QOqT3mI7hsMau',
          //   endId: 'nodeZBK0ZPpgMe1exezE',
          //   startAt: [200, 50],
          //   endAt: [0, 50],
          //   meta: null
          // },
          // {
          //   id: 'linkYlzpeKssBYwxQdLr',
          //   startId: 'node7WXbwOR6kSFD53Hf',
          //   endId: 'nodefHsy9uJObPtdHZv1',
          //   startAt: [200, 50],
          //   endAt: [0, 50],
          //   meta: null
          // },
          // {
          //   id: 'linkOwoUKiipYyVz3CYT',
          //   startId: 'nodeG3WeFnzCI15X58Qw',
          //   endId: 'node0aiA9VuhjkiAdZCs',
          //   startAt: [200, 50],
          //   endAt: [0, 50],
          //   meta: null
          // },
          // {
          //   id: 'link3UhFce4rO4TfAL2K',
          //   startId: 'nodeZBK0ZPpgMe1exezE',
          //   endId: 'nodeqkK9zjcDz53xKRlK',
          //   startAt: [200, 50],
          //   endAt: [0, 50],
          //   meta: null
          // },
          // {
          //   id: 'linkMjaKIDuDfbgqSHoz',
          //   startId: 'nodefHsy9uJObPtdHZv1',
          //   endId: 'nodeqkK9zjcDz53xKRlK',
          //   startAt: [200, 50],
          //   endAt: [0, 50],
          //   meta: null
          // },
          // {
          //   id: 'linkdUBf9aeOoXR3X65Y',
          //   startId: 'node0aiA9VuhjkiAdZCs',
          //   endId: 'nodesyxisLH1hJDdPsxx',
          //   startAt: [200, 50],
          //   endAt: [0, 50],
          //   meta: null
          // },
          // {
          //   id: 'link02lGIqBJZWrTlCFv',
          //   startId: 'nodeqkK9zjcDz53xKRlK',
          //   endId: 'nodeDhVU6w2KbEnJCjZs',
          //   startAt: [200, 50],
          //   endAt: [0, 25],
          //   meta: null
          // },
          // {
          //   id: 'link3i9b2ZsNM8wyjRop',
          //   startId: 'nodesyxisLH1hJDdPsxx',
          //   endId: 'nodeDhVU6w2KbEnJCjZs',
          //   startAt: [200, 50],
          //   endAt: [0, 25],
          //   meta: null
          // }
        ]

    public graphMenuList:any[] =  [  // 点击空白处的右键菜单
          [
            {
              label: '开始节点',
              disable(graph:any) {
                return !!graph.nodeList.find((node:any) => node.meta.prop === 'start')
              },
              selected: (graph:any, coordinate:any) => {
                graph.addNode({
                  width: 100,
                  height: 80,
                  coordinate: coordinate,
                  meta: {
                    prop: 'start',
                    name: '开始节点'
                  }
                })
              }
            },
            {
              label: '描述节点',
              disable: false,
              selected: (graph:any, coordinate:any) => {
                graph.addNode({
                  width: 200,
                  height: 100,
                  coordinate: coordinate,
                  meta: {
                    prop: 'condition',
                    name: '描述节点'
                  }
                })
              }
            },
            {
              label: '文本节点',
              disable: false,
              selected: (graph:any, coordinate:any) => {
                graph.addNode({
                  width: 200,
                  height: 50,
                  coordinate: coordinate,
                  meta: {
                    prop: 'textAlign',
                    name: '文本节点'
                  }
                })
              }
            },
            {
              label: '审批节点',
              disable: false,
              selected: (graph:any, coordinate:any) => {
                graph.addNode({
                  width: 100,
                  height: 100,
                  coordinate: coordinate,
                  meta: {
                    prop: 'approval',
                    name: '审批节点'
                  }
                })
              }
            },
            {
              label: '抄送节点',
              disable: false,
              selected: (graph:any, coordinate:any) => {
                graph.addNode({
                  width: 200,
                  height: 100,
                  coordinate: coordinate,
                  meta: {
                    prop: 'cc',
                    name: '抄送节点'
                  }
                })
              }
            },
            {
              label: '结束节点',
              disable(graph:any) {
                return !!graph.nodeList.find((point:any) => point.meta.prop === 'end')
              },
              selected: (graph:any, coordinate:any) => {
                graph.addNode({
                  width: 80,
                  height: 50,
                  coordinate: coordinate,
                  meta: {
                    prop: 'end',
                    name: '结束节点'
                  }
                })
              }
            }
          ],
          [
            {
              label: '打印数据',
              selected: (graph:any, coordinate:any) => {
                this.$emit('flowData',graph)
                console.log(JSON.stringify(graph.toJSON(), null, 2))
              }
            },
            {
              label: '全选',
              selected: (graph:any, coordinate:any) => {
                graph.selectAll()
              }
            }
          ]
        ]

    public nodeMenuList:any[] = [  // 点击节点的右键菜单
          [
            {
              label: '删除',
              disable: false,
              hidden(node:any) {
                return node.meta.prop === 'start'
              },
              selected(node:any, coordinate:any) {
                node.remove()
              }
            },
            {
              label: '编辑',
              disable: false,
              hidden(node:any) {
                return node.meta.prop === 'start'
              },
              selected(node:any, coordinate:any) {
                console.log(node)
              }
            }
          ]
        ]

    public linkMenuList:any[] = [  // 点击连接线的右键菜单
          [
            {
              label: '删除',
              disable: false,
              selected(link:any, coordinate:any) {
                link.remove()
              }
            },
            {
              label: '编辑',
              disable: false,
              selected:(link:any, coordinate:any)=> {
                this.editBorder(link)
                // popPrompt('提示性辅助文字','','请输入正确的文字').then((res)=>{
                //   if(!link.meta){ link.meta = {} }
                //   link.meta.tips = res
                // })
              }
            }
          ]
        ]

    private metaStyle(meta:any){ // 根据状态返回对应的边框颜色(针对长方形和圆形)
        if(meta.borderColor && meta.prop != 'approval'){
          return {
            border:`2px solid ${meta.borderColor}`
          }
        }else{
          return ""
        }
      }
    
    private ccStyle(meta:any){ // 根据状态返回对应的边框颜色(针对菱形)
        if(meta.borderColor && meta.prop == 'approval'){
          return {
            border:`2px solid ${meta.borderColor}`
          }
        }else{
          return ""
        }
      }
    
    private linkDesc(link:any){ // 连线上的提示文字（存放在连接线的meta上）
        return link.meta && link.meta.tips?link.meta.tips:''
      }

    private linkStyle(link:any){ // 可以根据状态修改连接线的颜色
        if(link.meta){
          if( link.meta.borderColor || link.meta.color ){
            return {
              hover: '#FF0000',        // 连线 hover 时颜色
              color: link.meta.borderColor || 'red',            // 连线颜色
              textColor: link.meta.color || 'red',        // 连线描述文字颜色
              textHover: '#FF0000',    // 连线 hover 时描述文字颜色
              font: '14px Arial',      // 连线 描述文字
              dotted: false,           // 连线 是否是虚线
              lineDash: [4, 4],        // 为虚线时 虚线参数
              background: 'rgba(255,255,255,0.6)'  // 描述文字背景  
            }
          }
        }
      }
    
    private enterIntercept(formNode:any, toNode:any, graph:any) {
        const formType = formNode.meta.prop
        switch (toNode.meta.prop) {
          case 'start':
            return false
          case 'approval':
            return [
              'start',
              'approval',
              'condition',
              'cc',
              'textAlign'
            ].includes(formType)
          case 'condition':
            return [
              'start',
              'approval',
              'condition',
              'cc',
              'textAlign'
            ].includes(formType)
          case 'end':
            return [
              'approval',
              'cc',
              'textAlign'
            ].includes(formType)
          default:
            return true
        }
      }
    
    private outputIntercept(node:any, graph:any) {
        return !(node.meta.prop === 'end')
    }
  }
</script>

<style lang="scss" scoped>
  .super-flow-demo2 {
    width            : 100%;
    height           : 800px;
    margin           : 0 auto;
    background:white;
    ::v-deep .super-flow__node {
      border-radius: 10px;
      border: none;
      box-shadow: none;
      &:hover{
        border:none;
        box-shadow: none;
      }
      .flow-node {
        > header {
          font-size   : 14px;
          height      : 32px;
          line-height : 32px;
          padding     : 0 12px;
          color       : #ffffff;
        }
        &.flow-node-start {
          width:100px;height:50px;
          box-shadow: 1px 2px 8px rgba(0, 0, 0, .4);
          margin-top: 15px;
          border-radius: 10px;
          .spanText{
            width: 100%;
            height: 100%;
            display: flex;
            justify-content: center;
            align-items: center;
          }
          > header {
            background-color : #55abfc;
          }
        }
        &.flow-node-condition {
          border: 1px solid #ccc;
          box-shadow: 1px 2px 8px rgba(0, 0, 0, .4);
          height: 100%;
          border-radius: 10px;
          padding: 5px;
          box-sizing: border-box;
          .spanText{
            width: 100%;
            height: 15px;
            line-height: 15px;
            padding-left: 2px;
          }
          .contentLine{
            width: 100%;
            margin-top: 5px;
            text-indent: 2px;
            overflow: hidden;
            text-overflow: ellipsis;
            font-size: 12px;
            display: -webkit-box;
            -webkit-line-clamp: 4;
            -webkit-box-orient: vertical;
          }
          > header {
            background-color : #BC1D16;
          }
        }
        &.flow-node-approval {
          position: relative;
          height: 100px;
          .content{
            position: absolute;
            width:100px;height:100px;
            // margin-left: 50px;
            transform:rotate(45deg);
            box-shadow: 1px 2px 8px rgba(0, 0, 0, .4);
          }
          .spanText{
            text-align: center;
            width: 100%;
            position: absolute;
            top: 50%;
            left: 50%;
            transform: translate(-50%,-50%);
            display: flex;
            align-items: center;
            justify-content: center;
            span{
              display: inline-block;
              width: 100%;
              overflow: hidden;
              text-overflow: ellipsis;
              display: -webkit-box;
              -webkit-line-clamp: 2;
              -webkit-box-orient: vertical;
            }
          }
          > header {
            background-color : rgba(188, 181, 58, 0.76);
          }
        }
        &.flow-node-cc {
          width:198px;height:100px;
          box-shadow: 1px 2px 8px rgba(0, 0, 0, .4);
          border-radius: 50%;
          .spanText{
            text-align: center;
            width: 90%;
            left: 5%;
            position: absolute;
            height: 100%;
            padding: 30px;
            box-sizing: border-box;
            display: flex;
            justify-content: center;
            align-items: center;
            span{
              display: inline-block;
              width: 100%;
              overflow: hidden;
              text-overflow: ellipsis;
              display: -webkit-box;
              -webkit-line-clamp: 2;
              -webkit-box-orient: vertical;
            }
          }
          > header {
            background-color : #30b95c;
          }
        }
        &.flow-node-textAlign {
          width:200px;height:50px;
          box-shadow: 1px 2px 8px rgba(0, 0, 0, .4);
          .spanText{
            width: 100%;
            height: 100%;
            padding: 20px;
            white-space: nowrap;
            box-sizing: border-box;
            display: flex;
            justify-content: center;
            align-items: center;
          }
          > header {
            background-color : #30b95c;
          }
        }
        &.flow-node-end {
          width:100px;height:50px;
          box-shadow: 1px 2px 8px rgba(0, 0, 0, .4);
          border-radius: 10px;
          .spanText{
            width: 100%;
            height: 100%;
            display: flex;
            justify-content: center;
            align-items: center;
          }
        }
      }
    }
  }
</style>